<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>代理模式之图片预加载</title>
</head>
<body>
	<h1>代理模式之图片预加载</h1>
</body>
<script type="text/javascript">

    // 不使用代理的预加载图片函数如下
    /*
    var myImage = (function(){
        var imgNode = document.createElement("img");
        document.body.appendChild(imgNode);
        var img = new Image();
        img.onload = function(){
            imgNode.src = this.src;
        };
        return {
            setSrc: function(src) {
                imgNode.src = "http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif";
                img.src = src;
            }
        }
    })();
    // 调用方式
    myImage.setSrc("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png");
    */


    // 代理方式图片预加载
    var myImage = (function(){
        var imgNode = document.createElement("img");
        document.body.appendChild(imgNode);
        return {
            setSrc: function(src) {
                imgNode.src = src;
            }
        }
    })();
    // 代理模式
    var ProxyImage = (function(){
        var img = new Image();
        img.onload = function(){
            myImage.setSrc(this.src);
        };
        return {
            setSrc: function(src) {
                myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");
                img.src = src;
            }
        }
    })();
    // 调用方式
    ProxyImage.setSrc("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png");

</script>
</html>